<!--
 * @Description: 
 * @Version: V1.0.0
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2024-09-27 16:48:55
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2024-11-03 00:09:07
 * @FilePath: index.vue
 * Copyright 2024 Marvin, All Rights Reserved. 
 * 2024-09-27 16:48:55
-->
<template>
  <div :class="classNames">
    <form>
      <slot></slot>
    </form>
  </div>
</template>

<script lang="ts">
import { useSize } from "@/ArcoUni/hook/use-size";
import { computed, defineComponent, provide, reactive, ref, toRefs } from "vue";
import context from "./context";
const icon = defineComponent({
  name: "Card",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  props: {
    model: {
      type: Object,
      required: true,
    },
    layout: {
      type: String,
      default: "horizontal",
    },
    size: {
      type: String,
    },
    labelColProps: {
      type: Object,
      default: () => ({ span: 8, offset: 0 }),
    },
    wrapperColProps: {
      type: Object,
      default: () => ({ span: 16, offset: 0 }),
    },
    labelColStyle: Object,
    wrapperColStyle: Object,
    labelAlign: {
      type: String,
      default: "right",
    },
    disabled: {
      type: Boolean,
      default: void 0,
    },
    rules: {
      type: Object,
    },
    autoLabelWidth: {
      type: Boolean,
      default: false,
    },
    scrollToFirstError: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["submit", "submitSuccess", "submitFailed"],
  setup(props, { slots }) {
    const prefixCls = "arco-form";
    const {
      // id,
      model,
      layout,
      disabled,
      // labelAlign,
      labelColProps,
      wrapperColProps,
      // labelColStyle,
      // wrapperColStyle,
      size,
      rules,
    } = toRefs(props);

    const { mergedSize } = useSize(size);
    const autoLabelWidth = computed(
      () => props.layout === "horizontal" && props.autoLabelWidth,
    );

    const visible = ref(true);
    const labelWidth = reactive({});
    const maxLabelWidth = computed(() => {
      const values = Object.values(labelWidth) as number[];
      if (values.length === 0) {
        return 0;
      }
      return values.reduce((max, value) => Math.max(max, value), -Infinity);
    });

    const fields = [];

    const addField = (formItemInfo) => {
      if (formItemInfo && formItemInfo.field) {
        fields.push(formItemInfo);
      }
    };

    const setLabelWidth = (width, uid) => {
      if (uid && labelWidth[uid] !== width) {
        labelWidth[uid] = width;
      }
    };

    const removeField = (formItemInfo) => {
      if (formItemInfo && formItemInfo.field) {
        fields.splice(fields.indexOf(formItemInfo), 1);
      }
    };
    // const setFields = (data) => {
    //   fields.forEach((field) => {
    //     if (data[field.field]) {
    //       field.setField(data[field.field]);
    //     }
    //   });
    // };

    const handleClose = () => {
      visible.value = false;
    };
    const handleAfterLeave = () => {};

    const isaction = computed(() => {
      return Boolean(slots.action);
    });

    const handleSubmit = () => {
      const list = [];
      fields.forEach((field) => {
        list.push(field.validate());
      });
      Promise.all(list).then((result) => {
        console.log(result, fields, "我收result");
        // const errors = {};
        // let hasError = false;
        // result.forEach((item) => {
        //   if (item) {
        //     hasError = true;
        //     errors[item.field] = item;
        //   }
        // });
        // if (hasError) {
        //   props.scrollToFirstError &&
        //     scrollToFirstError(Object.keys(errors)[0]);
        //   emit("submitFailed", { values: model.value, errors }, e);
        // } else {
        //   emit("submitSuccess", model.value, e);
        // }
        // emit(
        //   "submit",
        //   { values: model.value, errors: hasError ? errors : void 0 },
        //   e,
        // );
      });
    };

    // 重置验证规则
    const resetFields = (field) => {
      const _fields = field ? [].concat(field) : [];
      fields.forEach((field2) => {
        if (_fields.length === 0 || _fields.includes(field2.field)) {
          field2.resetField();
        }
      });
    };

    provide(
      context.formInjectionKey,
      reactive({
        layout,
        disabled,
        // labelAlign,
        labelColProps,
        wrapperColProps,
        // labelColStyle,
        // wrapperColStyle,
        model,
        size: mergedSize,
        rules,
        fields,
        // touchedFields,
        addField,
        removeField,
        // validateField,
        setLabelWidth,
        // removeLabelWidth,
        labelWidth,
        maxLabelWidth,
        autoLabelWidth,
      }),
    );

    const classNames = computed(() => {
      return [
        prefixCls,
        `${prefixCls}-layout-${props.layout}`,
        `${prefixCls}-size-${mergedSize.value}`,
        {
          [`${prefixCls}-auto-label-width`]: props.autoLabelWidth,
        },
      ];
    });
    return {
      prefixCls,
      classNames,
      visible,
      isaction,
      handleClose,
      handleAfterLeave,
      handleSubmit,
      resetFields,
    };
  },
});
export default icon;
</script>

<!-- <style lang="scss">
@import "./index.scss";
</style> -->
